<template>
	<view id="app">
		<!-- 头部 -->
		<view class="header">
			<template v-if="info">
				<!-- 头部上 -->
				<view @click="goInfo" class="header-top">
					<view class="header-pic">
						<img
							:src="
								info.photo
									? info.photo
									: 'http://toutiao-img.itheima.net/FhmjTCDRSJOd7PvKJh9McU1n3Qwh'
							"
							alt=""
						/>
					</view>
					<view class="header-sign"> {{ info.userName }} </view>
					<view class="header-time">
						<span>今日阅读</span> <span>99 分钟</span>
					</view>
				</view>
				<!-- 头部下 -->
				<view class="header-content">
					<view @click="goMywork" class="header-content-text">
						<span>0</span> <span>动态</span>
					</view>
					<view @click="goFollow('关注')" class="header-content-text">
						<span>{{ info.follow }}</span> <span>关注</span>
					</view>
					<view @click="goFollow('粉丝')" class="header-content-text">
						<span>{{ info.fans }}</span> <span>粉丝</span>
					</view>
				</view>
				<!-- 内容一 -->
			</template>
			<template v-else>
				<view @click="goLogin" class="login">
					<image
						src="https://img2.baidu.com/it/u=3035872156,255770104&fm=253&fmt=auto&app=138&f=PNG"
						mode=""
					></image>
					<view class="header-time">
						<span>今日阅读</span> <span>0 分钟</span>
					</view>
				</view>
			</template>
		</view>

		<view class="content">
			<!-- 收藏 -->
			<view @click="goCollect('我的收藏')" class="content-collect">
				<view class="conten-collect-map">
					<img
						src="@/static/收藏图.png"
						alt=""
						style="width: 70rpx;height: 70rpx;"
					/>
				</view>
				<span>收藏</span>
			</view>
			<!-- 历史 -->
			<view @click="goCollect('我的历史')" class="content-collect2">
				<view class="conten-history-map">
					<img
						src="@/static/历史.png"
						alt=""
						style="width: 70rpx;height: 70rpx;"
					/>
				</view>
				<span>历史</span>
			</view>
			<!-- 作品 -->
			<view @click="goMywork('作品')" class="content-collect3">
				<view class="conten-works-map">
					<img
						src="@/static/书写.png"
						alt=""
						style="width: 70rpx;height: 70rpx;"
					/>
				</view>
				<span>作品</span>
			</view>
		</view>
		<!-- 内容二 -->
		<view class="content2">
			<view class="kong"> </view>
			<view class="news">
				<view class="news-text"> <span>消息通知</span> </view>
				<view class="news-map">
					<img
						src="@/static/大于号.png"
						alt=""
						style="width: 32rpx;height: 48rpx;"
					/>
				</view>
			</view>
			<view class="user">
				<view class="user-text"> <span>用户反馈</span> </view>
				<view class="user-map">
					<img
						src="@/static/大于号.png"
						alt=""
						style="width: 32rpx;height: 48rpx;"
					/>
				</view>
			</view>
			<view class="xzhi">
				<view class="xzhi-text"> <span>小智同学</span> </view>
				<view class="xzhi-map">
					<img
						src="@/static/大于号.png"
						alt=""
						style="width: 32rpx;height: 48rpx;"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { UserStore } from '../../store/user.js'
import { storeToRefs } from 'pinia'

const userStore = UserStore()

const goInfo = () => {
	uni.navigateTo({
		url: '/subpkg/info/info'
	})
}
const goLogin = () => {
	uni.navigateTo({
		url: '/subpkg/login/login'
	})
}

const goMywork = active => {
	uni.navigateTo({
		url: `/subpkg/my-work/my-work?active=${active}`
	})
}
const goCollect = active => {
	uni.navigateTo({
		url: `/subpkg/collect/collect?active=${active}`
	})
}
const goFollow = active => {
	uni.navigateTo({
		url: `/subpkg/follow/follow?active=${active}`
	})
}
// 页面加载
onLoad(message => {
})

// 页面显示
onShow(() => {
	userStore.getUserinfo()
})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { info } = storeToRefs(userStore)
</script>

<style lang="scss">
#app {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	background-color: #f5f7f9;
}

// 头部
.header {
	// position: ;
	width: 100%;
	height: 350rpx;
	background-color: #3e9df8;
}
.login {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	flex-direction: column;
	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-top: calc(350rpx - 150rpx - 150rpx);
	}
	.header-time {
		color: #fff;
		font-size: 24rpx;
		display: flex;
		justify-content: space-around;
	}
}
.header-top {
	position: relative;
	padding: 0 40rpx;
	padding-top: 80rpx;
	display: flex;
	color: #fff;
}

.header-pic {
	display: flex;
	width: 150rpx;
	height: 150rpx;
	image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
}

.header-sign {
	margin-left: 40rpx;
	color: #fff;
	display: flex;
}

.header-time {
	position: absolute;
	background: rgba(0, 0, 0, 0.3);
	right: 0;
	top: 120rpx;
	height: 80rpx;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 4rpx 30rpx;
	border-radius: 40rpx 0 0 40rpx;
}

.header-content {
	padding: 20rpx 0;
	color: #fff;
	// height: 100rpx;
	display: flex;
	justify-content: space-around;
}

.header-content-text {
	width: 250rpx;
	flex-basis: 33%;
	flex-direction: column;
	display: flex;
	align-items: center;
	height: 100rpx;
}

// .content {
// 	// position: relative;
// 	display: flex;
// 	justify-content: space-around;
// 	padding: 40rpx 60rpx;
// 	height: 220rpx;
// 	width: 100%;
// 	background-color: #fff;
// }
// // 收藏
// .content-collect {
// 	// position: absolute;
// 	flex-direction: column;
// 	width: 160rpx;
// 	height: 120rpx;
// 	// flex-basis: 33%;
// 	 border-right: 1px solid #ccc;
// }
.content {
	// position: relative;
	display: flex;
	justify-content: space-around;
	padding: 40rpx 20rpx;
	height: 120rpx;
	width: 100%;
	background-color: #fff;
}

// 收藏
.content-collect {
	// position: absolute;
	flex-direction: column;
	width: 160rpx;
	height: 120rpx;
	flex-basis: 33%;
	align-items: center;
	display: flex;
	border-right: 1px solid #ccc;
}

.content-collect2 {
	// position: absolute;
	flex-direction: column;
	width: 160rpx;
	height: 120rpx;
	flex-basis: 33%;
	align-items: center;
	display: flex;
	border-right: 1px solid #ccc;
}

.content-collect3 {
	// position: absolute;
	flex-direction: column;
	width: 160rpx;
	height: 120rpx;
	flex-basis: 33%;
	align-items: center;
	display: flex;
}

.content2 {
}

.kong {
	height: 20rpx;
	background-color: #f5f7f9;
}

.news {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	color: #323233;
	// font-size: 28rpx;
	line-height: 38rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #ebedf0;
}

.news-text {
	// padding-top: 24rpx;
	// padding-bottom: 24rpx;
	text-align: left;
	font-size: 28rpx;
	width: 80%;
	color: #323233;
}

.news-map {
	height: 24px;
	line-height: 24px;
	margin: 0 auto;
}

.user {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	color: #323233;
	// font-size: 28rpx;
	line-height: 38rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #ebedf0;
}

.user-text {
	// padding-top: 24rpx;
	// padding-bottom: 24rpx;
	text-align: left;
	font-size: 28rpx;
	width: 80%;
	color: #323233;
}

.user-map {
	height: 24px;
	line-height: 24px;
	margin: 0 auto;
}

.xzhi {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	color: #323233;
	// font-size: 28rpx;
	line-height: 38rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #ebedf0;
}

.xzhi-text {
	// padding-top: 24rpx;
	// padding-bottom: 24rpx;
	text-align: left;
	font-size: 28rpx;
	width: 80%;
	color: #323233;
}

.xzhi-map {
	height: 24px;
	line-height: 24px;
	margin: 0 auto;
}
</style>
